<template>
    <div class="body">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); height: 60px;">
            <el-menu-item index="1" style="margin-top: 10px; margin-left: 20px;" @click="index = 1">基本信息</el-menu-item>
            <el-menu-item index="2" style="margin-top: 10px;" @click="index = 2">修改密码</el-menu-item>
        </el-menu>
        <div v-show="index === 1">
            <el-form label-width="100px" class="demo-ruleForm"
                style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-top: 20px;">
                <div style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px;">
                    <div style="text-align: center;">
                        <img class="avatar1" :src="user.img">
                        <p class="change" style="color:grey; padding-top: 10px;" @click="changeImg = true">修改头像</p>
                    </div>
                    <el-dialog :visible.sync="changeImg">
                        <el-upload class="upload-demo" ref="upload" action="" :http-request="upload" multiple=""
                            :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px" size="small" type="success"
                                @click="submitUpload">上传到服务器</el-button>
                            <div slot="tip" class="el-upload__tip">
                                只能上传jpg/png文件，且不超过500kb
                            </div>
                        </el-upload>
                    </el-dialog>
                    <el-form-item label="用户名">
                        <el-input v-model="changeUser.userName" style="width: 90%;"> </el-input>
                    </el-form-item>
                    <el-form-item label="签名">
                        <el-input type="textarea" v-model="changeUser.description" style="width: 90%;"> </el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="changeUser.addr" style="width: 75%;"></el-input>
                        <el-button @click="getAddr">选择地址</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="update1">应用</el-button>
                        <span style="color: red;margin-left: 30px;" v-if="user.infoStatus === 0">待审核</span>
                    </el-form-item>
                </div>

            </el-form>
        </div>
        <div v-show="index === 2">
            <el-form :model="ruleForm1" status-icon :rules="rules1" ref="ruleForm1" label-width="100px"
                class="demo-ruleForm">
                <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); margin-top: 20px;">
                    <div style="margin-right: 20px ;padding-top: 20px; padding-bottom: 20px;">
                        <el-form-item label="密码" prop="pass">
                            <el-input type="password" v-model="ruleForm1.pass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="checkPass">
                            <el-input type="password" v-model="ruleForm1.checkPass" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm1')">提交</el-button>
                            <el-button @click="resetForm1('ruleForm1')">重置</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { _getUserById } from '../../api/user';
import { _updateUserInfo } from '../../api/user';
import { _confPWD } from '../../api/user';
import { _uploadUi } from '../../api/user';
export default {
    name: 'chengeInformation',
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm1.checkPass !== '') {
                    this.$refs.ruleForm1.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm1.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            name: "",
            url: "",
            oldAddr: '',
            addr: "",
            ruleForm1: {
                pass: '',
                checkPass: ''
            },
            index: 1,
            activeIndex: '1',
            rules1: {
                pass: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],

            },
            changeImg: false,
            imageUrl: '',
            userId: '',
            user: {},
            changeUser: {},
        }
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        //通过onchanne触发方法获得文件列表
        handleChange(file, fileList) {
            this.fileList = fileList;
            console.log(fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        upload(file) {
            let fd = new FormData();

            //文件信息中raw才是真的文件
            fd.append("files", file.file);
            console.log(fd);

            _uploadUi(fd).then((res) => {
                this.url = 'data:image/jpeg;base64,' + res;
                this.changeImg=false;
            });
        },
        getAddr() {
            this.$router.push({
                name: 'mapSet'
            })
        },
        update1() {
            // console.log(this.changeUser)
            // console.log(this.user)
            if (this.user.userName === this.changeUser.userName &&
                this.user.description === this.changeUser.description &&
                this.oldAddr === this.changeUser.addr) {
                console.log("数据相同")
                const h = this.$createElement;
                this.$notify({
                    title: '',
                    message: h('i', { style: 'color: grey' }, '数据相同')
                });
            }
            else {
                _updateUserInfo(this.changeUser).then((res) => {
                    console.log(res)
                })
                const h = this.$createElement;
                this.$notify({
                    title: '',
                    message: h('i', { style: 'color: green' }, '更新成功，等待审核')
                });
                console.log("更新成功")

            }

        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var user = {
                        password: this.ruleForm1.pass,
                        userId: this.user.userId
                    }
                    _confPWD(user).then((res) => {
                        console.log(res)
                        if (res.data) {
                            const h = this.$createElement;
                            this.$notify({
                                title: '',
                                message: h('i', { style: 'color: green' }, '修改成功')
                            });
                        } else {
                            const h = this.$createElement;
                            this.$notify({
                                title: '',
                                message: h('i', { style: 'color: grey' }, '与旧密码相同')
                            });
                        }
                    })

                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm1(formName) {
            this.$refs[formName].resetFields();
        }
    },
    watch: {
        url(){
            this.user.img=this.url
        },
        user() {
            // console.log("______")
            // console.log(this.changeUser)
            if (this.addr != '') {
                this.user.addr = this.addr
            }
            this.changeUser = JSON.parse(JSON.stringify(this.user))
            console.log(this.user.addr)
        },
    },
    created() {
        this.userId = this.$route.query.userId
        if (this.$route.params.userId != null) {
            this.userId = this.$route.params.userId
            this.addr = this.$route.params.addr
        }
        _getUserById(this.userId).then((res) => {
            this.user = res.data
            // console.log("-------")
            // this.changeUser = res.data
            this.oldAddr = JSON.parse(JSON.stringify(this.user.addr))
        })
    },
    mounted() {

    },

}

</script>

<style scoped>
.change:hover{
    cursor: pointer;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.body {
    width: 60%;
    margin-left: 20%;
}

.avatar1 {
    width: 150px;
    /* height: 150px; */
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
</style>